{extend name="layouts/app"/}
{block name="main"}
<link rel="stylesheet" href="/static/libs/webupload/webuploader.css">
<style>
   .upload-wrap{ background: #fff;border:1px solid #e2e2e2}
   .upload-main{}
   .uploader .queueList {
       margin: 15px;
   }
   .uploader .placeholder {
       border: 3px dashed #e6e6e6;
       min-height: 180px;
       padding-top: 98px;
       text-align: center;
       background: url('/static/admin/images//image.png') center 33px no-repeat;
       color: #cccccc;
       font-size: 18px;
       position: relative;
   }
   .webuploader-container {
       position: relative;
   }
   .uploader .placeholder .webuploader-pick {
       font-size: 18px;
       background: #00b7ee;
       border-radius: 3px;
       line-height: 44px;
       padding: 0 30px;
       color: #fff;
       display: inline-block;
       margin: 20px auto;
       cursor: pointer;
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   }
    .uploader .filelist {
        list-style: none;
        margin: 0;
        padding: 0;
    }
   .uploader .filelist:after {
       content: '';
       display: block;
       width: 0;
       height: 0;
       overflow: hidden;
       clear: both;
   }
   .filelist li{float:left;width:100px;height:100px;margin-right:10px;position: relative;overflow: hidden;border:1px solid #e2e2e2;padding:10px;}
   .filelist li .imgbox{width:100px;height:100px;overflow: hidden}
   .filelist li .imgbox img{width:100%;}
   .filelist li .state-info{position: absolute;bottom: 0;right:0;height:30px;width:30px;}
   .filelist li.file-success .state-info{background: url("/static/admin/images/success.png") no-repeat;background-size: contain}
   .uploader .statusBar {
       height: 63px;
       border-top: 1px solid #dadada;
       padding: 0 20px;
       line-height: 63px;
       vertical-align: middle;
       position: relative;
   }
   .statusBar .progress {
       border: 1px solid #1483d8;
       width: 198px;
       background: #fff;
       height: 18px;
       position: relative;
       display: inline-block;
       text-align: center;
       line-height: 20px;
       color: #6dbfff;
       position: relative;
       margin-right: 10px
   }
   .statusBar .progress span.percentage {
       width: 0;
       height: 100%;
       left: 0;
       top: 0;
       background: #1483d8;
       position: absolute;
   }
   .statusBar .progress span.text{
       position: relative;
       z-index:10
   }
   #uploader .statusBar .info {
       display: inline-block;
       font-size: 14px;
       color: #666666;
   }
   #uploader .statusBar .btns {
       position: absolute;
       top: 10px;
       right: 20px;
       line-height: 40px;
       bottom:10px
   }
   #filePicker2{display:inline-block}

   #uploader .statusBar .btns .webuploader-pick, #uploader .statusBar .btns .uploadBtn, #uploader .statusBar .btns .uploadBtn.state-uploading, #uploader .statusBar .btns .uploadBtn.state-paused {
       background: #ffffff;
       border: 1px solid #cfcfcf;
       color: #565656;
       padding: 0 18px;
       display: inline-block;
       border-radius: 3px;
       margin-left: 10px;
       cursor: pointer;
       font-size: 14px;
       float: left;
   }
</style>
<div class="upload-wrap">
    <div class="upload-main">
        <div id="uploader" class="uploader">
            <div class="queueList">
                <div id="dndArea" class="placeholder">
                    <div id="filePicker" class="webuploader-container">选择图片</div>
                    <p>单次最多可选20个文件</p>
                </div>
                <ul class="filelist" id="filelist"></ul>
            </div>
            <div class="statusBar" style="display:none;">
                <div class="progress" style="display: none;">
                    <span class="text">0%</span>
                    <span class="percentage" style="width: 0%;"></span>
                </div>
                <div class="info">共0个文件（0B），已上传0个</div>
                <div class="btns">
                        <div id="filePicker2" class="webuploader-container">继续添加</div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/libs/webupload/webuploader.js"></script>
<script>
    var uploader = new WebUploader.Uploader({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: '/static/libs/webupload/Uploader.swf',
        // 文件接收服务端。
        server: "{:url('uploads/image')}",

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
        // 其他配置项
    });
    // 当有文件添加进来的时候
    var num=0;
    uploader.on( 'fileQueued', function( file ) {
        num++;
        var $li = $(
            '<li id="' + file.id + '"class="state">' +
            '<div class="imgbox"><img></div>' +
            '<div class="state-info"></div>' +
            '</li>'
            ),
            $img = $li.find('img');
        // $list为容器jQuery实例
        $("#filelist").append( $li );
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, 100, 100 );

    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        console.log(percentage)
        $(".statusBar").show();
        $(".progress").css("display","inline-block");
        $(".progress .percentage").css( 'width', percentage * 100 + '%' );
        $(".progress .text").text(percentage* 100+'%' );
       /* var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
        }*/
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file,response ) {
        console.log(response);
        $(".progress").css("display","none");
        $( '#'+file.id ).addClass('file-success');
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
    uploader.addButton({
        id: '#filePicker2',
    });
    uploader.on( 'uploadFinished', function(  ) {
        var state=uploader.getStats();
        console.log(state.successNum+"***"+state.progressNum)
    });

</script>
{/block}
